<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1400" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="推荐分类" prop="category_id">
						<blCategory style="width: 400px;" v-model="form.category_id" model="AdSpace" />
					</el-form-item>

					<el-form-item label="推荐名称" prop="name">
						<el-input v-model="form.name" style="width: 400px;"></el-input>
					</el-form-item>

					<el-form-item label="推荐标识" prop="slug">
						<el-input v-model="form.slug" style="width: 400px;" placeholder="ADXXXX"></el-input>
					</el-form-item>

					<el-form-item label="推荐位尺寸">
						<el-input v-model="form.width" style="width: 150px;" placeholder="宽度"></el-input>
						&nbsp;x&nbsp;
						<el-input v-model="form.height" style="width: 150px;" placeholder="高度"></el-input>
					</el-form-item>

					<el-form-item label="物料规则" prop="contents">
						<sc-form-table hideAdd ref="table" v-if="!loading" v-model="form.contents"
							:addTemplate="addTemplate" drag-sort placeholder="暂无数据">

							<el-table-column label="预览" width="60">
								<template #default="{row}">
									<el-image style="max-width: 35px; max-height: 35px;" preview-teleported
										hide-on-click-modal :src="row.image+'?x-oss-process=image/resize,w_35&t='"
										:preview-src-list="[row.image]" show-progress fit="contain"
										:z-index="19900501" />
								</template>
							</el-table-column>

							<el-table-column prop="title" label="名称/ID" width="150">
								<template #default="{row}">
									{{row.title}}
									<p>{{row.model_id}}</p>
								</template>
							</el-table-column>

							<el-table-column prop="type" align="center" label="类型" width="70">

							</el-table-column>

							<el-table-column prop="link_url" label="链接" width="250">

							</el-table-column>

							<el-table-column prop="is_active" label="是否启用" width="90">
								<template #default="{ row }">
									<el-switch v-model="row.is_active" :active-value="true"
										:inactive-value="false"></el-switch>
								</template>
							</el-table-column>

							<el-table-column label="起止时间" min-width="250">
								<template #default="{ row }">
									<blDatePicker v-model:starts_at="row.start_at" v-model:ends_at="row.end_at" />
								</template>
							</el-table-column>

							<el-table-column label="操作" fixed="right" align="right" width="90">
								<template #default="{row}">
									<el-button-group>
										<el-button @click="" link type="primary" size="small">切换</el-button>
									</el-button-group>
								</template>
							</el-table-column>

						</sc-form-table>

						<el-dropdown trigger="click" style="margin-top:10px;">
							<el-button size="small" type="primary" icon="Plus">添加物料</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item style="padding: 1px 5px">
										<el-button @click="add('productSelect')" size="small" type="primary"
											icon="Goods">
											商品
										</el-button>
									</el-dropdown-item>
									<el-dropdown-item style="padding: 1px 5px">
										<el-button @click="add('mediaSelect')" size="small" type="primary"
											icon="CameraFilled">
											素材
										</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>

						<productSelect ref="productSelect"></productSelect>
						<mediaSelect ref="mediaSelect"></mediaSelect>
					</el-form-item>

				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	var _this;

	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));


	import productSelect from './select/product.vue'
	import mediaSelect from './select/media.vue'


	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor,
			productSelect,
			mediaSelect
		},
		data() {
			return {
				props: {
					label: 'title',
					value: 'id',
					keyword: 'keyword'
				},
				activeTab: 'basic',
				data: {

				},
				loading: false,
				mode: "add",
				titleMap: {
					add: '新增推荐位',
					edit: '编辑推荐位'
				},
				form: {
					id: '',
					name: '',
					slug: '',
					contents: [],
					category_id: null
				},
				rules: {
					name: [{
						required: true,
						message: '请填写推荐名称'
					}]
				},
				addTemplate: {
					title: "",
					model_id: null,
					type: '',
					image: '',
					link_url: '',
					content: [],
				},
				visible: false,
				isSaveing: false,
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			handleEdit(row, column) {
				if (!row.editing) {
					row.editing = true;
					row.editingColumn = column;
					this.$nextTick(() => {
						const refName = `select-${column}-${row.id}`
						this.$refs[refName]?.toggleMenu()
					})
				}
			},
			saveEdit(row) {
				row.editing = false;
				row.editingColumn = null;
			},

			add(model) {
				if (model == 'productSelect') {
					this.$refs.productSelect.toggleMenu((e) => {
						this.$refs.table.rowAdd({
							title: e.product_title,
							type: "商品",
							model_id: e.id,
							image: e.product_image,
							is_active: true,
							link_url: `navigateTo://pages/shop/goods/details/details?id=${e.id}`,
							content: e
						})
					});
				}
				if (model == 'mediaSelect') {
					this.$refs.mediaSelect.toggleMenu((e) => {
						this.$refs.table.rowAdd({
							title: e.title,
							type: "素材",
							model_id: e.id,
							image: e.src,
							is_active: true,
							link_url: null,
							content: e
						})
					});
				}
			},

			success(res) {
				return true;
			},
			//显示
			open(data) {
				if (data) {
					this.mode = data;
				}
				this.visible = true;
				this.$nextTick(() => {
					if (this.mode == 'add') {

					}
				})
				return this;
			},
			//表单提交方法
			submit() {
				this.$refs.ruleForm.validate(async (data) => {
					if (data) {

						if (this.form.contents.length > 0) {
							this.form.contents.forEach((item, index) => {
								item.order = index;
							})
						}

						var res;
						this.isSaveing = true;
						if (this.mode == 'add') {
							res = await _this.$API.system.adSpace.create.post(this.form);
						} else {
							res = await _this.$API.system.adSpace.update.post(this.form);
						}
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', data, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.loading = true

				if (!data.id) {
					if (data.category_id) {
						this.form.category_id = data.category_id
					}
					this.loading = false
					return;
				}

				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.$API.system.adSpace.show.get(params)
					this.form = res.data
					this.loading = false
				}, 0)
			}
		}
	}
</script>

<style>
	.custom-empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #8c939d;
		border-radius: 5px;
	}

	.custom-empty i {
		font-size: 30px;
		color: #fff;
	}

	.custom-empty p {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		margin-top: 10px;
	}
</style>
